@use "Content/scss/sizes";
@use "Content/scss/colors";
$pre-color: colors.$text-color-var;
$pre-bg: colors.$well-bg-var;

.ace-editor {
    border: 1px solid var(--border-color-light);
    font-family: var(--bs-font-monospace);
    border-radius: var(--bs-border-radius) !important;
    &:not(&.has-error) {
        .ace-raven {
            border-bottom-left-radius: var(--bs-border-radius);
            border-bottom-right-radius: var(--bs-border-radius);
        }
    }
    &.has-error {
        border-color: var(--bs-danger);
        .bg-faded-danger {
            border-bottom-left-radius: var(--bs-border-radius);
            border-bottom-right-radius: var(--bs-border-radius);
        }
    }
    .react-ace-wrapper {
        display: flex;
        align-items: end;
        position: relative;

        .fullScreenModeLabel {
            position: absolute;
            font-size: 12px;
            bottom: sizes.$gutter;
            right: sizes.$gutter-md;
            height: 0;
            opacity: 0.2;
            color: colors.$text-color-var;
        }

        .actions {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            align-self: stretch;
            gap: sizes.$gutter-xs;
            padding: sizes.$gutter-xs sizes.$gutter-xxs;
            background-color: colors.$panel-bg-2-var;
            border-top-right-radius: var(--bs-border-radius);
            border-bottom-right-radius: var(--bs-border-radius);
            border-left: 1px solid colors.$border-color-light-var;
        }
    }
    .ace_autocomplete {
        line-height: 2;
    }

    .ace_placeholder {
        color: colors.$text-muted-var !important;
        white-space: pre;
        opacity: 0.5;
        position: unset !important;
        overflow: auto;
    }
}

.ace-raven {
    background-color: colors.$input-bg-var;
    color: $pre-color;
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);

    .ace_gutter {
        background: colors.$ace-gutter-bg-var;
        color: color-contrast(colors.$ace-gutter-bg-var);
        border-right: 1px solid colors.$border-color-light-var;
    }

    .ace_print-margin {
        width: 1px;
        background: colors.$border-color-light-var;
    }

    .ace-pastel-dark-raven {
        background-color: colors.$well-bg-var;
        color: colors.$text-color-var;
    }

    .ace_cursor {
        color: color-contrast(colors.$pre-bg-var);
    }

    .ace_marker-layer .ace_selection {
        background: rgba(var(--bs-primary-rgb), 0.15);
    }

    &.ace_multiselect .ace_selection.ace_start {
        box-shadow: 0 0 3px 0px #2c2828;
    }

    .ace_marker-layer .ace_step {
        background: rgb(102, 82, 0);
    }

    .ace_marker-layer .ace_bracket {
        margin: 0;
        border: none;
        box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.7);
    }

    .ace_marker-layer .ace_code-removed {
        background: rgba(var(--bs-danger-rgb), 0.15) !important;
        position: absolute;
    }

    .ace_marker-layer .ace_code-added {
        background: rgba(var(--bs-success-rgb), 0.15) !important;
        position: absolute;
    }

    .difference_gap {
        background: fade($pre-bg, 50%); //TODO
    }

    .ace_marker-layer .ace_active-line {
        background: rgba(var(--bs-primary-rgb), 0.075);
    }

    .ace_gutter-active-line {
        background: rgba(var(--bs-primary-rgb), 0.15);
    }

    .ace_gutter-cell {
        display: flex;
        justify-content: end;
        position: relative;
        align-items: center;
    }

    .ace_gutter-cell.ace_removed {
        background-image: url("");
        background-position: 2px 2px;
        background-repeat: no-repeat;
    }

    .ace_gutter-cell.ace_added {
        background-image: url("");
        background-position: 2px 2px;
        background-repeat: no-repeat;
    }

    .ace_marker-layer .ace_selected-word {
        border: 1px solid rgba(var(--bs-primary-rgb), 0.7);
    }

    .ace_invisible {
        color: rgba(255, 255, 255, 0.25);
    }

    .ace_keyword,
    .ace-pastel-dark-raven .ace_type,
    .ace-pastel-dark-raven .ace_meta {
        color: var(--token-keyword);
    }

    .ace_constant,
    .ace-pastel-dark-raven .ace_constant.ace_character,
    .ace-pastel-dark-raven .ace_constant.ace_character.ace_escape,
    .ace-pastel-dark-raven .ace_constant.ace_other {
        color: var(--token-boolean);
    }

    .ace_keyword.ace_operator {
        color: var(--token-operator);
    }

    .ace_operator {
        color: var(--token-operator);
    }

    .ace_name {
        color: var(--token-string);
    }

    .ace_constant.ace_character {
        color: var(--token-important);
    }

    .ace_constant.ace_language {
        color: var(--token-boolean);
    }

    .ace_constant.ace_numeric {
        color: var(--token-number);
    }

    .ace_invalid,
    .ace_invalid.ace_illegal {
        color: #f8f8f8;
        background-color: rgba(86, 45, 86, 0.75);
    }

    .ace_invalid.ace_deprecated {
        text-decoration: underline;
        font-style: italic;
        color: colors.$color-4-2;
    }

    .ace_fold {
        width: 24px !important;
        height: 24px !important;
        margin-top: 0 !important;
        background: colors.$color-5 !important;
        border: none !important;
        border-radius: 20px !important;
        cursor: pointer !important;
        pointer-events: auto !important;

        &:before {
            content: "\f112";
            color: colors.$gray-lighter !important;
            font-family: "icomoon" !important;
            font-size: 14px;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 24px;
            width: 24px;
        }
    }

    .ace_fold-widget {
        width: 12px !important;
        height: 12px !important;
        display: inline-block;
        background: none !important;
        position: absolute;

        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 4px solid;
            border-top-color: color-contrast(colors.$ace-gutter-bg-var);
        }

        &.ace_closed:before {
            border-top: none;
            border-bottom: 4px solid;
            border-bottom-color: color-contrast(colors.$ace-gutter-bg-var);
        }
    }

    .ace_function {
        color: var(--token-keyword);
    }

    .ace_string {
        color: var(--token-string);
    }

    .ace_string.ace_regexp {
        color: var(--token-number);
    }

    .ace_comment {
        color: var(--token-boolean);
    }

    .ace_variable {
        color: var(--token-keyword);
    }

    .ace_metadata {
        opacity: 0.6;
    }

    .ace_variable.ace_language {
        color: var(--token-boolean);
    }

    .ace_xml-pe {
        color: #494949;
    }

    .ace-pastel-dark-raven .ace_indent-guide {
        background: url()
            right repeat-y;
    }
}
